<template>
  <div class="container">
    <div class="big-screen" ref="chartDom"></div>
    <div
      class="center"
      :style="{
        backgroundImage: `url(${require('@/assets/fy/' +
          centerIcon +
          '.png')})`,
      }"
    ></div>
    <div class="desc">
      <div class="num" :style="{ color: numColor }">72%</div>
      <div class="unit">{{ title }}(%)</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'CircleProgressChart',
  props: {
    // 进度值 (0-100)
    value: {
      type: Number,
      default: 72,
      validator: (val) => val >= 0 && val <= 100,
    },
    title: {
      type: String,
      default: '收费率',
    },
    numColor: {
      type: String,
      default: '#00a8ff',
    },
    pieColor: {
      type: String,
      default: '',
    },
    centerIcon: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }

      this.chart = echarts.init(this.$refs.chartDom);
      this.updateChart();

      // 响应窗口大小变化
      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    updateChart() {
      if (!this.chart) return;

      let value = this.value;
      const option = {
        backgroundColor: '',

        series: [
          {
            name: '',
            type: 'pie',
            radius: ['58%', '48%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            endAngle: -360,
            z: 5,
            zlevel: 0,
            label: {
              normal: {
                position: 'center',
              },
            },

            animation: false,
            data: [
              {
                value: value,
                name: '',
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: this.pieColor,
                        },
                        {
                          offset: 1,
                          color: this.pieColor,
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: 'transparent',
                  },
                },
              },
            ],
          },
          // 这个进度条是环形图上的刻度线
          {
            name: '',
            type: 'gauge',
            radius: '58%',
            center: ['50%', '50%'],
            startAngle: 90,
            z: 9,
            endAngle: -360,
            splitNumber: 12,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 60,
              distance: -10,
              lineStyle: {
                width: 2,
                color: '#0a0d35',
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            animation: false,
            data: [
              {
                value: 0,
                name: '',
              },
            ],
          },
          //  外层装饰圆环
          {
            type: 'pie',
            radius: ['63%', '65%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            name: '',
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: this.pieColor,
                    opacity: 0.3,
                  },
                },
              },
            ],
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
  watch: {
    // 监听数据变化自动更新图表
    value() {
      this.updateChart();
    },
    title() {
      this.updateChart();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
    window.removeEventListener('resize', this.handleResize);
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 50%;
  height: 100%;
  margin-top: -0.1563rem;
  position: relative;
  .desc {
    font-size: 0.1042rem;
    width: 100%;
    height: 0.4167rem;
    color: #fff;
    margin-top: -0.1042rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .num {
      font-family: DIN;
      font-weight: bold;
      font-size: 0.1563rem;
      color: #00a8ff;
    }
    .unit {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 0.1042rem;
      color: #f3ffff;
      line-height: 0.1563rem;
    }
  }
}
.big-screen {
  position: relative;
  width: 100%;
  height: 1.0938rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center {
  content: '';
  position: absolute;
  width: 0.3125rem;
  height: 0.3125rem;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('~@/assets/fy/doller.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  pointer-events: none;
}
</style>
